<div class="page-container" v-cloak>
    <el-card>
        <template #header>
            <div class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><a href="{:url('admin/user/index')}">管理员列表</a></el-breadcrumb-item>
                    <el-breadcrumb-item>{$title}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </template>
        <div>
            <el-form label-width="100px">
                <el-form-item label="所属角色">
                    <div>
                        <el-cascader
                                v-model="cascader_value"
                                filterable
                                :options="role_list"
                                :props="{ checkStrictly: true,value:'role_id',label:'role_name',expandTrigger: 'hover' }"
                                clearable></el-cascader>
                    </div>
                </el-form-item>
                <el-form-item label="管理员姓名">
                    <el-input v-model="form.real_name"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <div>
                        <el-input v-model="form.username"></el-input>
                        <div v-if="form.admin_user_id>0" class="form-small">
                            <small>修改用户名时，必须同时输入密码，否则新的用户名将无法登录！</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" placeholder="不输入则不修改，新增必须填写"></el-input>
                </el-form-item>
                <el-form-item label="门店上限">
                    <el-input v-model="form.subbranch" placeholder="允许开店数量"></el-input>
                </el-form-item>
                <el-form-item>
                        <el-button @click="submitEvent" type="primary">
                        提交
                    </el-button>
                    <el-button @click="goBack" type="warning">
                        返回
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</div>

<script>
    const App = {
        data() {
            return {
                cascader_value: [],
                role_list: [],
                form: {}
            }
        },
        mounted() {
            this.getInfo()
        },
        computed: {
            role_id() {
                if (this.cascader_value.length > 0) {
                    return this.cascader_value[this.cascader_value.length - 1]
                } else {
                    return 0
                }
            }
        },
        methods: {
            /**
             * 获取联动组件的渲染值
             * @param role_id
             */
            getCascaderValue(role_id) {
                this.role_list.forEach(item => {
                    if (item.children) {
                        item.children.forEach(it => {

                            it.children.forEach(i => {
                                if (parseInt(i.role_id) === parseInt(role_id)) {
                                    this.cascader_value = [item.role_id, it.role_id, i.role_id]
                                    return
                                }
                            })

                            if (parseInt(it.role_id) === parseInt(role_id)) {
                                this.cascader_value = [item.role_id, it.role_id]
                                return
                            }
                        })

                        if (parseInt(item.role_id) === parseInt(role_id)) {
                            this.cascader_value = [item.role_id]
                            return
                        }
                    }
                })
            },
            /**
             * 获取编辑所需信息
             */
            getInfo() {
                let admin_user_id = this.getUrlQuery('admin_user_id', 0)
                this.httpGet("{:url('admin/user/edit')}/" + admin_user_id, {}).then(res => {
                    if (res.status) {
                        let {role_list = [], admin_user = {}} = res.data
                        this.role_list = role_list
                        if (admin_user.admin_user_id) {
                            this.getCascaderValue(admin_user.role_id)
                            this.form = {
                                ...admin_user,
                            }
                        }

                    }
                })
            },
            /**
             * 提交信息
             */
            submitEvent() {
                this.httpPost("{:url('admin/user/edit')}", {
                    ...this.form,
                    role_id: this.role_id
                }, true).then(res => {
                    if (res.status) {
                        this.$message.success(res.msg)
                        location.href = "{:url('admin/user/index')}"
                    }
                })
            },
        }
    }
</script>

<style>
</style>
